page-team-performance-overview{
    @function pxToVw($px) {
        @return $px/1080*100vw;
    }
    $level-1: #fcae08;
    $level-2: #6aca2b;
    $level-3: #3bc662;

    ion-header{
        .team-performance-head {
            background: #fff;
            border-bottom: 1px solid #e9e9e9;
            .groupTab {
                position: relative;
                height: pxToVw(150);
                line-height: pxToVw(150);
                font-size: 0;
            //    padding:0 pxToVw(98);
                span {
                    //display: inline-block;
                    // 别再改回去了！5s上有bug
                    float: left;
                    text-align: center;
                    width: 33.3333333%;
                    color: #333333;
                    font-size: pxToVw(54);
                    &.active {
                        color: #35ac63;
                        background-color: transparent;
                    }
                }
                .switch-sign {
                    position: absolute;
                    width: 19.98148vw;
                    height: pxToVw(7);
                    bottom: pxToVw(-4);
                    left: 0;
                    //margin-left: pxToVw(100);
                    margin-left: 6.5vw;
                    background-color: #37b34a;
                    transition: all .15s linear;
                    display: block;
                }
                .sign-change-one {
                    transition: all .15s linear;
                    margin-left: pxToVw(430);
                }
                .sign-change-two {
                    transition: all .15s linear;
                    //margin-left: pxToVw(768);
                    margin-left: 73.5vw;
                }
            }
        }
    }
    .group-overview{

        .group-tip{
            border-bottom: 1px solid #e9e9e9;
            height: pxToVw(164);
            line-height: pxToVw(164);
            font-size: pxToVw(42);
            text-align: center;
            padding:0 pxToVw(30);
            color: #fcae08;
            .group-data{
                font-size: pxToVw(54);
            }
        }
        .groupType {
            display: flex;
            padding:0 pxToVw(60);
            background-color: #fff;
            border-bottom: 1px solid #e9e9e9;
            span {
                display: inline-block;
                font-size: pxToVw(42);
                line-height: pxToVw(140);
                width: 22%;
                text-align: center;
            }
            /*.type-row{
                width:25%;
            }*/
            .type-row:nth-child(1){
                width:17.89%
            }
            .type-row:nth-child(2){
                width: 32%;
            }
            .type-row:nth-child(3){
                width: 21%;
            }
            .type-row:nth-child(4){
                width: 29%;
            }
        }
        .group-list{
            background-color: #fff;
            ul{
                list-style: none;
                margin: 0;
                padding: 0;
                li{
                    padding:0 pxToVw(60);
                    display: flex;
                    span{
                        display: inline-block;
                        text-align: center;
                        line-height: pxToVw(111);
                        font-size: pxToVw(42);
                        color: #333;
                        width: 25%;
                    }
                    span:nth-child(1){
                        width:17.89%
                    }
                    span:nth-child(2){
                        width: 32%;
                    }
                    span:nth-child(3){
                        width: 21%;
                    }
                    span:nth-child(4){
                        width: 29%;
                    }
                    &:nth-child(even){
                        background: #f6f6f6;
                    }
                    &.active span{
                        color: #37b34a;
                    }
                }
            }
        }
        .group-bar{
            background: #f2f2f2;
            padding: pxToVw(60) 0;
            .group-bar-content{
                background: #fff;
                padding: 0 pxToVw(60);
                .bar-title{
                    padding-top: pxToVw(78);
                    padding-bottom: pxToVw(81);
                    .bar-title-name{
                        //border-left: pxToVw(10) solid #35ac63;
                        //vertical-align: middle;
                        color: #333;
                        font-size: pxToVw(54);
                        padding-left: pxToVw(30);
                        position: relative;
                        display: inline-block;
                        &::after{
                            display: block;
                            content: '';
                            height:pxToVw(54);
                            border-left: pxToVw(10) solid #35ac63;
                            position: absolute;
                            top:50%;
                            left:0;
                            margin-top: pxToVw(-27);
                        }
                    }
                }
                .bar-chart{
                    //padding-left: pxToVw(60);
                    padding-bottom: pxToVw(18);
                    .bar-chart-item{
                        display: flex;
                        align-items: center;
                        padding-bottom: pxToVw(60);
                        .bar-name{
                            font-size: pxToVw(42);
                            display: inline-block;
                            width: pxToVw(228);
                            color:#333;
                        }
                        .bar-value{
                            font-size: pxToVw(42);
                            margin-left: pxToVw(15);
                        }
                        .bar-value-bg{
                            height: pxToVw(48);
                           // transition: width .5s ease-out;
                            min-width: pxToVw(10);
                            &.level-1{
                                //width: 4%;
                                background: $level-1;
                            }
                            &.level-2{
                                //width: 20%;
                                background: $level-2;
                            }
                            &.level-3{
                                //width: 44%;
                                background: $level-3;
                            }
                        }
                        .type-1{
                            color: $level-1;
                        }
                        .type-2{
                            color: $level-2;
                        }
                        .type-3{
                            color: $level-3;
                        }
                    }
                }
            }
        }
        .end-bar{
            background: #fff;
            padding: 0;
            margin-bottom: pxToVw(60);
        }
    }

    .group-group{
        .group-time{
            border-bottom: 1px solid #e9e9e9;
        }
        .group-header{
            padding:0 pxToVw(60);
            background-color: #fff;
            box-shadow: 0 1vw 1.5vw rgba(0, 0, 0, 0.1);
            ion-row{
                height: pxToVw(180);
                font-size: pxToVw(42);
                font-weight: bold;
                color: #1F212A;
                align-items: center;
                .col{
                    padding: 0;
                }
                .col:first-of-type{
                    width: pxToVw(301);
                }
                .col:nth-of-type(2){
                    width: pxToVw(317);
                }
                .col:last-of-type{
                    width: pxToVw(338);
                }
            }
        }
        .group-item{
            background-color: #ffffff;
            height: pxToVw(150);
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
            align-items: center;
            margin-top: pxToVw(45);
            position: relative;
            .isDirect{
                position: absolute;
                top: -8px;
                left: -8px;
                background: url("../assets/images/myTeam/Administered.png");
                background-size: cover;
                width: pxToVw(124);
                height: pxToVw(98);
            }
            .col{
                .label{
                    margin:0;
                }
            }
            .col:first-of-type{
                width: pxToVw(301);
            }
            .col:nth-of-type(2){
                width: pxToVw(317);
            }
            .col:last-of-type{
                width: pxToVw(338);
            }
            ion-col {
                font-size: pxToVw(42);
                color: #333;
                ion-label{
                    white-space: normal;
                }
            }
            &:last-child{
                margin-bottom: 20vw;
            }
        }
        .group-performance{
            margin-top: pxToVw(360);
            padding:0 pxToVw(60);
            .groups-name{
                font-size: pxToVw(42);
                color:#35ac63;
            }
        }
    }

    .performanceHead {
        background: #f5f5f5;
        .groupType {
            height: pxToVw(180);
            background: #fff;
            padding: 0 pxToVw(30);
            display: flex;
            align-items:center;
            box-shadow: 0 pxToVw(15) pxToVw(50) rgba(0, 0, 0, 0.1);
            span {
                display: inline-block;
                font-size: pxToVw(42);
                line-height: pxToVw(140);
                width: 22%;
                text-align: center;
                color:#333;
                font-weight: bold;
            }
            .typeName {
                width:13.6%;
            }
            .thisYear {
                width:23.8%;
            }
            .hisTop{
                width:23.8%;
            }
            .chaju{
                width:23.8%;
            }
            .divLeft {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-size: pxToVw(42);
                height: pxToVw(140);
                width:15%;
                font-weight: bold;
            }
        }
        .groupList{
            margin-top: pxToVw(220);
        }
    }

    ion-content{
        .fixed-content{
            margin-top: pxToVw(340) !important;
        }
        .scroll-content{
            margin-top: pxToVw(340) !important;
            background-color: #f5f5f5;
        }
        .groupList {
            margin-top:pxToVw(45);
            padding: 0 pxToVw(30) pxToVw(45);
            background: #f5f5f5;
            .groupItem {
                position: relative;
                background: #fff;
                //width: pxToVw(1020);
                width:100%;
                margin-bottom:pxToVw(45);
                height: pxToVw(280);
                box-shadow: 0 0 pxToVw(30) rgba(0, 0, 0, 0.1);
                -webkit-border-radius: 3vw;
                -moz-border-radius: 3vw;
                border-radius: 3vw;
                .groupLoge{
                    position: absolute;
                    display: inline-block;
                    top: -8px;
                    left: -6px;
                    width: 124px;
                    height: 98px;
                    background: url("../assets/images/myTeam/Administered.png") 0 0 no-repeat;
                    background-size: pxToVw(124) pxToVw(98);
                }
                .leaderName {
                    float: left;
                    font-size:pxToVw(42);
                    color: #35ac63;
                    height: 25.92593vw;
                    width: 15%;
                    //width:pxToVw(176);
                    padding-top: 7vw;
                    text-align: center;
                    word-break: break-all;
                    span {
                        color: #999;
                        font-size: pxToVw(36);
                        display: block;
                    }
                }

                .groupRight {
                    color: #333333;
                    font-size: 0;
                    float: right;
                    width: 85%;

                    .groRightTop, .groRightBot {
                        height: pxToVw(140);
                        span {
                            width: 28%;
                            text-align: center;
                            float: left;
                            font-size: pxToVw(36);
                        }
                        .fontBigger {
                            font-size: pxToVw(33);
                        }
                    }
                    .groRightBot {
                        // border-top: 1px solid #F9F9F9;
                        height: pxToVw(139);
                        line-height: pxToVw(139);
                        .divide_line{
                            span{
                                border-top: 1px solid #F9F9F9;
                            }

                        }
                        .typeName {
                            padding-top: pxToVw(10);
                            float: left;
                            line-height: pxToVw(60);
                        }
                    }
                    .groRightTop {
                        line-height: pxToVw(140);

                    }
                    .title {
                        font-size: pxToVw(36);
                        width: 16% !important;
                    }
                }
            }
        }
    }
    ion-fab {

        .fab-ios-light {
            width: pxToVw(130);
            height: pxToVw(130);
            padding: 0;
            background-color: transparent;
            .go-up-icon {
                width: pxToVw(130);
                height: pxToVw(130);
                max-width: none;
            }
        }
    }
    div.go-up {
        width:pxToVw(96);
        height: pxToVw(96);
        right: 5.556vw;
        bottom: 5.556vw;
        img {
            width: 100%;
            height: 100%;
            max-width: none;
        }
    }

}
